<template>
    <div class='tstrtvs_page'>
        <!-- 左侧导航面板 -->
        <div class="left-panel">
            <div class="status-info">
                <span class="status-item" :class="{ active: activeStatus === 'all' }" @click="setActiveStatus('all')">
                    全部{{ totalCount }}
                </span>
                <span class="status-item" :class="{ active: activeStatus === 'online' }" @click="setActiveStatus('online')">
                    在线{{ onlineCount }}
                </span>
                <span class="status-item" :class="{ active: activeStatus === 'offline' }" @click="setActiveStatus('offline')">
                    离线{{ offlineCount }}
                </span>
            </div>
            <div class="search-section">
                <div class="search-input">
                    <label>摄像头名称</label>
                    <input 
                        type="text" 
                        v-model="searchKeyword"
                        placeholder="请输入" 
                        @keyup.enter="handleSearch"
                    />
                </div>
                <button class="search-btn" @click="handleSearch">请输入</button>
            </div>
            <div class="charging-station">
                <button class="charging-btn" @click="handleChargingStation">充电站</button>
            </div>
        </div>

        <!-- 右侧视频显示区域 -->
        <div class="right-panel">
            <!-- 顶部控制栏 -->
            <div class="tstrtvs_control">
                <span class="max_play_time" v-if="maxPlayTime">{{ maxPlayTime }} 秒后停止播放</span>&nbsp;&nbsp;
                <span class="layout-controls">
                    <i @click="screensChanged(1)" :style="{ color: (state.screenNum === 1 ? '#00cccc' : '#fff') }"
                        class='iconfont icon-juxing' />
                    <i @click="screensChanged(4)" :style="{ color: (state.screenNum === 4 ? '#00cccc' : '#fff') }"
                        class='iconfont icon-a-xingzhuangjiehe7' />
                    <i @click="screensChanged(6)" :style="{ color: (state.screenNum === 6 ? '#00cccc' : '#fff') }"
                        class='iconfont icon-a-xingzhuangjiehe8' />
                    <i @click="screensChanged(9)" :style="{ color: (state.screenNum === 9 ? '#00cccc' : '#fff') }"
                        class='iconfont icon-xingzhuangjiehebeifen' />
                    <i @click="screensChanged(16)" :style="{ color: (state.screenNum === 16 ? '#00cccc' : '#fff') }"
                        class='iconfont icon-a-xingzhuangjiehe9' />
                </span>
                <a-divider type="vertical" />
                <span class="close-controls">
                    <span @click="closeAllHandle" style="cursor: pointer">
                        <i class='iconfont icon-a-xingzhuangjiehe5' />
                        关闭全部
                    </span>
                </span>
                <a-divider type="vertical"/>
            </div>

            <!-- 视频显示区域 -->
            <div class='webRtc'>
                <div v-for="item in state.screenNum" :key="item" :style="getstyle(item)">
                    <Jessibuca @ipCallOne = 'ipCallOne' @closeVideoOne = 'closeVideoOne' :playObj = 'state.videoPlayList[item-1] || {}'></Jessibuca>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, watch, onMounted, onBeforeUnmount,defineEmits, ref, inject, defineProps } from 'vue';


import { useRoute, useRouter } from 'vue-router';
import Jessibuca from "@/components/Jessibuca";

import { useVideoCountdown } from "@/hooks/useVideoCountdown.js";
const emit = defineEmits(['closeVideo','ipCallOne'])

const props = defineProps({
    playList: {
        default: () => [],
        type: Array
    },
    // usePlayerState: {
    //     type: Object,
    //     default: () => { return { screenNum: 1, maxPlayTime: 100 } }
    // },
})

const state = reactive({


    screenNum: 4,
    maxPlayTime: 100,
    layout: [
        {
            type: [1,1]
        },
        {
            type: [2, 2]
        },
        {
            type: [2, 3]
        },
        {
            type: [3, 3]
        },
        {
            type: [4, 4]
        }
    ],
    videoPlayList:[]

});

// 左侧面板相关数据
const activeStatus = ref('all');
const searchKeyword = ref('');
const totalCount = ref(0);
const onlineCount = ref(0);
const offlineCount = ref(0);

// 设置活动状态
const setActiveStatus = (status) => {
    activeStatus.value = status;
    // 这里可以根据状态筛选视频列表
    console.log('切换状态:', status);
};

// 处理搜索
const handleSearch = () => {
    if (searchKeyword.value.trim()) {
        console.log('搜索关键词:', searchKeyword.value);
        // 这里可以添加搜索逻辑
    }
};

// 处理充电站
const handleChargingStation = () => {
    console.log('打开充电站');
    // 这里可以添加充电站相关逻辑
};
// 倒计时结束的回调 关闭全部
const countdownCallBack =()=>{
    // console.log('countdownCallBack',data);
    closeAllHandle()
}
const {maxPlayTime, maxPlayTimeReset,maxPlayTimeClear  } = useVideoCountdown(countdownCallBack);
// 手动切换视频窗口
const screensChanged = (value) => {
    state.screenNum = value;
    emit('closeVideo',{data:{screenNum:state.screenNum},type:'screensChange'})
}

// 获取表格的位置和样式
const getstyle= (i) => {
    let index = i-1;
    if(state.screenNum !=6){
        let $sqrt = Math.sqrt(state.screenNum); //开方 拿到行列总数
        let $bf = (100/$sqrt).toFixed(2);   //宽高百分比
        let $x = Math.floor(index/$sqrt);  //拿到第几行
        let $y = index%$sqrt; //拿到第几列
        return {
            top:$x*$bf+'%',
            left:$y*$bf+'%',
            width:$bf+'%',
            height:$bf+'%',
        }
    }else{
        let defStyle = {
            top:0+'%',
            left:0+'%',
            width:33.3+'%',
            height:33.3+'%',
        }
        if(index == 0){
            defStyle.width =66.6+'%';
            defStyle.height =66.6+'%';
            return defStyle
        }else if(index == 1){
            defStyle.left =66.6+'%';
            return defStyle
        }else if(index == 2){
            defStyle.top =33.3+'%';
            defStyle.left =66.6+'%';
            return defStyle
        }else{
            defStyle.top =66.6+'%';
            defStyle.left =33.3*(index%3)+'%';
            return defStyle
        }
    }
}

// 获取自己是第几个窗口
// const filterVideoObj = ($index,$idx) => {
//     let x = state.layout[state.screenNum].type[0];
//     let y = state.layout[state.screenNum].type[1];
//     let $i = x*$index + $idx
//     return state.videoPlayList[$i] || {}
// }
// 关闭全部视屏
const closeAllHandle = () => {
    // console.log('closeAllHandle');
    emit('closeVideo',{data:{},type:'allClose'})
    // props.CloseScreen({screenId:-1,type:'allClose'})
}
// 播放器主动关闭某一个视屏
const closeVideoOne = (obj) => {
    // console.log('closeAllHandle',obj);
    emit('closeVideo',{data:obj,type:'one'})
    // props.CloseScreen({screenId:-1,type:'allClose'})
}

const ipCallOne = (obj) => {
    emit('ipCallOne',obj)
}
// 视屏修改  更换窗口
const videoPlayListChange = () => {
    let $screenNum = 1
    if(state.videoPlayList.length >1){
        $screenNum  = 4
    }
    if(state.videoPlayList.length >4){
        $screenNum  = 6
    }
    if(state.videoPlayList.length >6){
        $screenNum = 9
    }
    if(state.videoPlayList.length >9){
        $screenNum  = 16
    }
    // console.log('$screenNum:',$screenNum,'videoPlayList.length',state.videoPlayList.length,state.screenNum);
    if( $screenNum > state.screenNum){
        state.screenNum =$screenNum
    }
}
watch(()=>props.playList, (newval,oldval) => {
    // console.log('playList改变',newval,oldval);
    // selectedKeys.value = value.map(item=>item.id)
    state.videoPlayList = [...newval];
    videoPlayListChange();

    // 更新计数信息
    totalCount.value = newval.length;
    onlineCount.value = newval.filter(item => item.status === 'online' || item.isOnline).length;
    offlineCount.value = totalCount.value - onlineCount.value;

    if(state.videoPlayList.filter(item=>item.playUrl).length){
        maxPlayTimeReset();
    }else{
        maxPlayTimeClear()
    }
    // 

},{deep:true});


// 挂载完成时
onMounted(() => {
    // const {maxPlayTime, increment } =useVideoCountdown(countdownCallBack);
    // // 监听window大小变化
    // window.addEventListener("resize", props.WindowResizeHandler);
    // // 监听视频控件DOM大小变化
    // DomSize.bind(PlaylerRTVSRef.value, props.WindowResizeHandler);
    // // 监听浏览器全屏事件
    // document.addEventListener("fullscreenchange", props.fullScreenHandler, false)
})
// 组件卸载前
onBeforeUnmount(() => {
    // window.removeEventListener("resize", props.WindowResizeHandler);

    // 取消监听浏览器全屏事件
    // document.removeEventListener("fullscreenchange", props.fullScreenHandler, false)
    // console.log("----------组件卸载前-close------------");
    // props.CloseScreen({screenId:-1,type:'startClose'});
})





</script>

<style scoped lang="less">
.tstrtvs_page {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    background: linear-gradient(135deg, #0a1a2a 0%, #1a3a4a 100%);
    
    // 响应式设计
    @media (max-width: 1200px) {
        .left-panel {
            width: 250px;
        }
    }
    
    @media (max-width: 768px) {
        flex-direction: column;
        
        .left-panel {
            width: 100%;
            height: auto;
            padding: 15px;
            
            .status-info {
                justify-content: center;
                gap: 10px;
            }
        }
        
        .right-panel {
            .tstrtvs_control {
                position: relative;
                top: 0;
                width: 100%;
                justify-content: center;
                padding: 10px;
            }
        }
    }
    
    .left-panel {
        width: 280px;
        background: linear-gradient(180deg, #0d2b3a 0%, #1a3a4a 100%);
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        border-right: 2px solid #00cccc;
        box-shadow: 2px 0 10px rgba(0, 204, 204, 0.3);
        animation: slideInLeft 0.5s ease-out;

        .status-info {
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .status-item {
                color: #a0b1be;
                cursor: pointer;
                padding: 8px 12px;
                border-radius: 4px;
                transition: all 0.3s ease;
                font-size: 14px;
                position: relative;
                overflow: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(0, 204, 204, 0.2), transparent);
                    transition: left 0.5s ease;
                }
                
                &.active {
                    background: rgba(0, 204, 204, 0.2);
                    color: #00cccc;
                    font-weight: bold;
                    border: 1px solid #00cccc;
                    transform: scale(1.05);
                    
                    &::before {
                        left: 100%;
                    }
                }
                
                &:hover:not(.active) {
                    color: #00cccc;
                    background: rgba(0, 204, 204, 0.1);
                    transform: translateY(-2px);
                }
            }
        }

        .search-section {
            margin-bottom: 30px;
            
            .search-input {
                margin-bottom: 15px;
                
                label {
                    display: block;
                    margin-bottom: 8px;
                    font-size: 14px;
                    color: #a0b1be;
                    font-weight: 500;
                }
                
                input {
                    width: 100%;
                    padding: 10px;
                    border: 1px solid #2a4a5a;
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.1);
                    color: #fff;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    
                    &::placeholder {
                        color: #6b7c8a;
                    }
                    
                    &:focus {
                        outline: none;
                        border-color: #00cccc;
                        box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2);
                        transform: scale(1.02);
                    }
                }
            }
            
            .search-btn {
                width: 100%;
                padding: 12px;
                background: linear-gradient(135deg, #00cccc 0%, #00a0a0 100%);
                color: white;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 0;
                    height: 0;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    transition: width 0.6s ease, height 0.6s ease;
                }
                
                &:hover {
                    background: linear-gradient(135deg, #00a0a0 0%, #008080 100%);
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(0, 204, 204, 0.4);
                    
                    &::before {
                        width: 300px;
                        height: 300px;
                    }
                }
                
                &:active {
                    transform: translateY(0);
                }
            }
        }

        .charging-station {
            margin-top: auto;
            
            .charging-btn {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg, #1a4a5a 0%, #0d2b3a 100%);
                color: #00cccc;
                border: 2px solid #00cccc;
                border-radius: 8px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 600;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(0, 204, 204, 0.3), transparent);
                    transition: left 0.6s ease;
                }
                
                &:hover {
                    background: linear-gradient(135deg, #00cccc 0%, #00a0a0 100%);
                    color: #0a1a2a;
                    transform: translateY(-3px);
                    box-shadow: 0 8px 25px rgba(0, 204, 204, 0.5);
                    
                    &::before {
                        left: 100%;
                    }
                }
                
                &:active {
                    transform: translateY(-1px);
                }
            }
        }
    }

    .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        animation: slideInRight 0.5s ease-out;
        
        .tstrtvs_control {
            width: 100%;
            height: 50px;
            position: absolute;
            top: -50px;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 30px;
            color: #FFFFFF;
            background: rgba(13, 43, 58, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #00cccc;
            animation: slideInDown 0.5s ease-out;
            
            .layout-controls {
                display: flex;
                align-items: center;
                gap: 15px;
                margin: 0 20px;
                
                .iconfont {
                    cursor: pointer;
                    font-size: 18px;
                    color: #A0B1BE;
                    transition: all 0.3s ease;
                    
                    &:hover {
                        color: #00cccc;
                        transform: scale(1.1) rotate(5deg);
                    }
                }
            }
            
            .close-controls {
                .iconfont {
                    cursor: pointer;
                    font-size: 16px;
                    color: #A0B1BE;
                    margin-right: 8px;
                }
                
                span {
                    color: #A0B1BE;
                    transition: color 0.3s ease;
                    
                    &:hover {
                        color: #ff6b6b;
                        transform: scale(1.05);
                    }
                }
            }

            .max_play_time {
                color: #ff6b6b;
                font-weight: 500;
                margin-right: 20px;
                animation: pulse 2s infinite;
            }
        }

        .webRtc {
            margin-top: 20px;
            height: calc(100% - 20px);
            width: 100%;
            background: transparent;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            
            // 添加电路板背景效果
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: 
                    radial-gradient(circle at 20% 30%, rgba(0, 204, 204, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(0, 160, 160, 0.1) 0%, transparent 50%),
                    linear-gradient(45deg, transparent 40%, rgba(0, 204, 204, 0.05) 50%, transparent 60%);
                pointer-events: none;
                animation: backgroundShift 10s ease-in-out infinite;
            }
            
            > div {
                position: absolute;
                border: 2px solid rgba(0, 204, 204, 0.3);
                border-radius: 6px;
                background: rgba(13, 43, 58, 0.8);
                backdrop-filter: blur(5px);
                transition: all 0.3s ease;
                animation: fadeIn 0.5s ease-out;
                
                &:hover {
                    border-color: #00cccc;
                    box-shadow: 0 0 20px rgba(0, 204, 204, 0.3);
                    transform: scale(1.02);
                }
            }
        }
    }
}

// 动画关键帧
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes backgroundShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
</style>